<template>
  <div class="newJob-container">
    <v-form v-model="valid">
      <v-tooltip content-class="tooltip" right>
        <template v-slot:activator="{ on }">
          <v-icon class="pointer tooltip-icon" v-on="on" color="#79839B">
            mdi-information
          </v-icon>
        </template>
        <v-card class="tooltip-info" width="280">
          <v-card-title class="info-title"> Project Info </v-card-title>
          <v-card-text class="info-content">
            <v-spacer class="text-left">
              <v-col class="pa-0 mb-2">
                <v-row no-gutters>
                  <v-col :cols="6">Project Type</v-col>
                  <v-col :cols="6">DL</v-col>
                </v-row>
              </v-col>
              <v-col class="pa-0 mb-2">
                <v-row no-gutters>
                  <v-col :cols="6">Project Description</v-col>
                  <v-col :cols="6">2 nd Launching</v-col>
                </v-row>
              </v-col>
            </v-spacer>
          </v-card-text>
        </v-card>
      </v-tooltip>
      <v-container class="pl-16">
        <v-row class="align-center line" no-gutters>
          <v-col cols="2" class="label-wrap">
            <span>Customer Name</span>
          </v-col>
          <v-col class="text-left" cols="10">
            <v-card class="d-flex align-center" flat width="calc(40% + 32px)">
              <v-text-field
                v-model="formData.customerName"
                v-validate="'required'"
                name="Customer Name"
                class="gray-input"
                dense
                hide-details
                label="Enter the customer Name"
                required
                solo
              ></v-text-field>
              <v-icon class="pl-2" color="#79839B"> mdi-magnify </v-icon>
            </v-card>
            <span class="vee-validate-error">
              {{ errors.first("Customer Name") }}
            </span>
          </v-col>
          <v-col v-if="formData.customerCode" class="flex-grow-0">
            ({{ formData.customerCode }})
          </v-col>
        </v-row>
        <v-row class="align-center line" no-gutters>
          <v-col>
            <v-row no-gutters>
              <v-col cols="2" class="label-wrap">
                <span>Project Name</span>
              </v-col>
              <v-col class="text-left" cols="10">
                <v-card flat width="40%">
                  <v-text-field
                    v-model="formData.projectName"
                    v-validate="'required'"
                    name="Project Name"
                    class="gray-input"
                    dense
                    hide-details
                    label="Enter the Project name"
                    required
                    solo
                  ></v-text-field>
                </v-card>
                <span class="vee-validate-error">
                  {{ errors.first("Project Name") }}
                </span>
              </v-col>
            </v-row>
          </v-col>
        </v-row>
        <v-row class="align-center line" no-gutters>
          <v-col cols="6">
            <v-row no-gutters>
              <v-col cols="4" class="label-wrap">
                <span>Contact Person</span>
              </v-col>
              <v-col class="text-left" cols="8">
                <v-card class="d-flex align-center" flat width="80%">
                  <v-text-field
                    v-model="formData.contactPerson"
                    v-validate="'required'"
                    name="Contact Person"
                    class="gray-input"
                    dense
                    hide-details
                    label="Enter the contact person"
                    required
                    solo
                  ></v-text-field>
                  <v-icon class="ml-3" color="#79839B">
                    mdi-account-box
                  </v-icon>
                </v-card>
                <span class="vee-validate-error">
                  {{ errors.first("Contact Person") }}
                </span>
              </v-col>
            </v-row>
          </v-col>
          <v-col cols="6">
            <v-row no-gutters>
              <v-col cols="2" offset="2" class="label-wrap">
                <span>Tel</span>
              </v-col>
              <v-col class="text-left" cols="10">
                <v-card flat width="50%">
                  <v-text-field
                    v-model="formData.tel"
                    v-validate="'required|phone'"
                    name="Tel"
                    class="gray-input"
                    dense
                    hide-details
                    label="Enter the Tel"
                    required
                    solo
                  ></v-text-field>
                </v-card>
                <span class="vee-validate-error">
                  {{ errors.first("Tel") }}
                </span>
              </v-col>
            </v-row>
          </v-col>
        </v-row>
        <v-row class="align-center line" no-gutters>
          <v-col cols="2" class="label-wrap">
            <span>Address</span>
          </v-col>
          <v-col class="text-left" cols="9">
            <v-text-field
              v-model="formData.address"
              v-validate="'required'"
              name="Address"
              class="gray-input"
              dense
              hide-details
              label="Enter the Job Location"
              required
              solo
            ></v-text-field>
            <span class="vee-validate-error">
              {{ errors.first("Address") }}
            </span>
          </v-col>
        </v-row>
      </v-container>
      <v-expansion-panels
        class="panels"
        accordion
        focusable
        flat
        multiple
        v-model="panel"
      >
        <v-expansion-panel>
          <v-expansion-panel-header>Job Details</v-expansion-panel-header>
          <v-expansion-panel-content>
            <v-row class="line align-center" no-gutters>
              <v-col :cols="6">
                <v-row no-gutters>
                  <v-col cols="4" class="label-wrap">
                    <span>Job Name</span>
                  </v-col>
                  <v-col class="text-left" cols="8">
                    <v-card flat width="75%">
                      <v-text-field
                        v-model="formData.jobName"
                        v-validate="'required'"
                        name="Job Name"
                        class="gray-input"
                        dense
                        hide-details
                        label="Enter Job name"
                        required
                        solo
                      ></v-text-field>
                    </v-card>
                    <span class="vee-validate-error">
                      {{ errors.first("Job Name") }}
                    </span>
                  </v-col>
                </v-row>
              </v-col>
              <v-col>
                <v-row no-gutters>
                  <v-col cols="4" class="label-wrap">
                    <span>Priority</span>
                  </v-col>
                  <v-col class="text-left" cols="8">
                    <v-card flat width="50%">
                      <v-select
                        v-model="formData.priority"
                        v-validate="'required'"
                        name="Priority"
                        :items="priorityItems"
                        class="gray-input"
                        dense
                        hide-details
                        label="Select Priority"
                        required
                        solo
                      ></v-select>
                    </v-card>
                    <span class="vee-validate-error">
                      {{ errors.first("Priority") }}
                    </span>
                  </v-col>
                </v-row>
              </v-col>
            </v-row>
            <v-row class="line" no-gutters>
              <v-col>
                <v-row no-gutters>
                  <v-col class="label-wrap" :cols="4">
                    <span>Job Cate</span>
                  </v-col>
                  <v-col class="text-left" :cols="8">
                    <v-card
                      class="d-flex align-center"
                      flat
                      width="calc(75% + 32px)"
                    >
                      <v-text-field
                        v-model="formData.jobCate"
                        v-validate="'required'"
                        name="Job Cate"
                        class="gray-input"
                        dense
                        hide-details
                        label="Enter Job Cate"
                        required
                        solo
                      ></v-text-field>
                      <v-icon class="ml-2" color="#79839B">
                        mdi-magnify
                      </v-icon>
                    </v-card>
                    <span class="vee-validate-error">
                      {{ errors.first("Job Cate") }}
                    </span>
                  </v-col>
                </v-row>
              </v-col>
              <v-col>
                <v-row no-gutters>
                  <v-col class="label-wrap" :cols="2">
                    <span>Total Job</span>
                  </v-col>
                  <v-col :cols="2">
                    <span>{{ formData.totalJob }}</span>
                  </v-col>
                </v-row>
              </v-col>
            </v-row>
            <v-row class="line align-stretch" no-gutters>
              <v-col class="label-wrap" :cols="2">
                <span>Job Description</span>
              </v-col>
              <v-col class="text-left" :cols="9">
                <v-textarea
                  v-model="formData.jobDescription"
                  v-validate="'required'"
                  name="Job Description"
                  class="gray-input"
                  height="52"
                  dense
                  hide-details
                  label="Enter the job description"
                  required
                  solo
                  no-resize
                ></v-textarea>
                <span class="vee-validate-error">
                  {{ errors.first("Job Description") }}
                </span>
              </v-col>
              <v-col class="flex-grow-0 d-flex align-end ml-2">
                <v-icon color="#79839B"> mdi-magnify </v-icon>
              </v-col>
            </v-row>
            <v-row class="line" no-gutters>
              <v-col class="label-wrap" :cols="2">
                <span>Project Location</span>
              </v-col>
              <v-col class="text-left" :cols="9">
                <v-text-field
                  v-model="formData.projectLocation"
                  v-validate="'required'"
                  name="Project Location"
                  class="gray-input"
                  dense
                  hide-details
                  label="Please enter or select Project Location"
                  required
                  solo
                ></v-text-field>
                <span class="vee-validate-error">
                  {{ errors.first("Project Location") }}
                </span>
              </v-col>
              <v-col class="flex-grow-0 ml-2">
                <v-icon color="#79839B"> mdi-map-marker </v-icon>
              </v-col>
            </v-row>
            <v-row class="line" no-gutters>
              <v-col class="label-wrap" :cols="2">
                <span>Service Provider</span>
              </v-col>
              <v-col class="text-left" :cols="4">
                <v-card
                  class="d-flex align-center"
                  flat
                  width="calc(75% + 32px)"
                >
                  <v-text-field
                    v-model="formData.serviceProvider"
                    v-validate="'required'"
                    name="Service Provider"
                    class="gray-input"
                    dense
                    hide-details
                    label="Enter the service provider"
                    required
                    solo
                  ></v-text-field>
                  <v-icon class="ml-2" color="#79839B"> mdi-magnify </v-icon>
                </v-card>
                <span class="vee-validate-error">
                  {{ errors.first("Service Provider") }}
                </span>
              </v-col>
            </v-row>
            <v-row class="line" no-gutters>
              <v-col class="label-wrap" :cols="2">
                <span>Team</span>
              </v-col>
              <v-col class="text-left" :cols="4">
                <v-card
                  class="d-flex align-center"
                  flat
                  width="calc(75% + 32px)"
                >
                  <v-text-field
                    v-model="formData.team"
                    v-validate="'required'"
                    name="Team"
                    class="gray-input"
                    dense
                    hide-details
                    label="Place enter team"
                    required
                    solo
                  >
                  </v-text-field>
                  <v-icon class="ml-2" color="#79839B"> mdi-magnify </v-icon>
                </v-card>
                <span class="vee-validate-error">
                  {{ errors.first("Team") }}
                </span>
              </v-col>
            </v-row>
            <v-row class="line" no-gutters>
              <v-col class="label-wrap" :cols="2">
                <span>Assign to</span>
              </v-col>
              <v-col class="text-left" :cols="4">
                <v-card
                  class="d-flex align-center"
                  flat
                  width="calc(75% + 32px)"
                >
                  <v-text-field
                    v-model="formData.assignTo"
                    v-validate="'required'"
                    name="Assign to"
                    class="gray-input"
                    dense
                    hide-details
                    label="Enter the assign to"
                    required
                    solo
                  ></v-text-field>
                  <v-icon class="ml-2" color="#79839B">
                    mdi-account-box
                  </v-icon>
                </v-card>
                <span class="vee-validate-error">
                  {{ errors.first("Assign to") }}
                </span>
              </v-col>
            </v-row>
            <v-row class="line" no-gutters>
              <v-col>
                <v-row no-gutters>
                  <v-col :cols="4" class="label-wrap">
                    <span>Start Time</span>
                  </v-col>
                  <v-col class="text-left" :cols="8">
                    <v-card flat width="75%">
                      <RangePicker
                        v-model="formData.startTime"
                        v-validate="'required'"
                        name="Start Time"
                        :max="formData.endTime"
                        :defaultDatePage="startDefaultTimePage"
                        hide-details
                        label="place select start time"
                      ></RangePicker>
                    </v-card>
                    <span class="vee-validate-error">
                      {{ errors.first("Start Time") }}
                    </span>
                  </v-col>
                </v-row>
              </v-col>
              <v-col>
                <v-row no-gutters>
                  <v-col :cols="4" class="label-wrap">
                    <span>End Time</span>
                  </v-col>
                  <v-col class="text-left" :cols="8">
                    <v-card flat width="75%">
                      <RangePicker
                        v-model="formData.endTime"
                        v-validate="'required'"
                        name="End Time"
                        :min="formData.startTime"
                        :defaultDatePage="endDefaultTimePage"
                        hide-details
                        label="place select end time"
                      ></RangePicker>
                    </v-card>
                    <span class="vee-validate-error">
                      {{ errors.first("End Time") }}
                    </span>
                  </v-col>
                </v-row>
              </v-col>
            </v-row>
            <v-row class="line" no-gutters>
              <v-col class="label-wrap" :cols="2">
                <span>Remarks</span>
              </v-col>
              <v-col class="text-left" :cols="10">
                <v-card flat width="30%">
                  <v-text-field
                    v-model="remarks"
                    v-validate="'required'"
                    name="Remarks"
                    class="gray-input"
                    dense
                    hide-details
                    label="Please enter the remarks"
                    required
                    solo
                  ></v-text-field>
                </v-card>
                <span class="vee-validate-error">
                  {{ errors.first("Remarks") }}
                </span>
              </v-col>
            </v-row>
          </v-expansion-panel-content>
        </v-expansion-panel>
        <v-expansion-panel>
          <v-expansion-panel-header>Attachment</v-expansion-panel-header>
          <v-expansion-panel-content>
            <FileList :images="formData.attachmentList"></FileList>
          </v-expansion-panel-content>
        </v-expansion-panel>
        <v-expansion-panel>
          <v-expansion-panel-header disable-icon-rotate>
            Report Problem
          </v-expansion-panel-header>
          <v-expansion-panel-content>
            <EditableTable
              class="table"
              roundedHeader
              hide-default-footer
              :headers="tableHeaders"
              :items="formData.reportProblemList"
            >
              <template #item="{ item }">
                <tr>
                  <td>
                    <v-icon color="#79839B" class="icon pointer"
                      >mdi-minus-circle</v-icon
                    >
                  </td>
                  <td width="210">
                    <v-text-field
                      append-outer-icon="mdi-magnify"
                      class="gray-input"
                      dense
                      hide-details
                      solo
                    ></v-text-field>
                  </td>
                  <td
                    v-for="header in tableHeaders.slice(2)"
                    :key="header.value"
                  >
                    {{ item[header.value] }}
                  </td>
                </tr>
              </template>
            </EditableTable>
          </v-expansion-panel-content>
        </v-expansion-panel>
      </v-expansion-panels>
    </v-form>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { validateDate } from "@/common/constants/Utils";
import EditableTable from "@/components/Project/Table/EditableTable.vue";
import RangePicker from "@/components/Project/RangePicker/RangePicker.vue";
import FileList from "@/components/Project/AddNew/FileList.vue";
import VForm from "vuetify/src/components/VForm/index";
import { IJobForm } from "@/components/Project/index";
@Component({
  components: {
    EditableTable,
    RangePicker,
    FileList,
  },
})
export default class NewJob extends Vue {
  valid = false;
  panel = [0, 1, 2];
  priorityItems = ["Low", "Middle", "High"];
  formData: IJobForm = {
    id: "",
    //basic info
    customerName: "",
    customerCode: "",
    projectName: "",
    contactPerson: "",
    tel: "",
    address: "",
    //job details
    jobName: "",
    priority: "",
    jobCate: "",
    totalJob: "1",
    jobDescription: "",
    projectLocation: "",
    serviceProvider: "",
    team: "",
    assignTo: "",
    startTime: "",
    endTime: "",
    remarks: "",
    attachmentList: [],
    reportProblemList: [],
  };
  get startDefaultTimePage() {
    if (this.formData.startTime !== "") {
      const splitStartTime = this.formData.startTime.split(" ");
      if (validateDate(splitStartTime[0])) {
        return splitStartTime[0].split("-").slice(0, 2).join("-");
      }
      return "";
    } else {
      return "";
    }
  }
  get endDefaultTimePage() {
    if (this.formData.endTime !== "") {
      const splitEndTime = this.formData.endTime.split(" ");
      if (validateDate(splitEndTime[0])) {
        return splitEndTime[0].split("-").slice(0, 2).join("-");
      }
      return "";
    } else {
      return "";
    }
  }
  remarks = "";
  // Report Problem
  tableHeaders = [
    {
      value: "prepend",
      align: "center",
    },
    {
      text: "Serial Number",
      value: "number",
    },
    {
      text: "Item Description",
      value: "description",
    },
    {
      text: "Symptoms",
      value: "symptoms",
    },
  ];

  resetForm() {
    this.formData.id = "";
    this.formData.attachmentList = [];
    this.formData.reportProblemList = [];
    type VFormInstance = InstanceType<typeof VForm>;
    const formRef = this.$refs.form as VFormInstance;
    formRef.reset();
  }
  setFormData(formData: object) {
    Object.assign(this, formData);
  }

  async validateFormData() {
    const valid: boolean = await this.$validator.validate();
    if (valid) {
      return this.getFormData();
    } else {
      return false;
    }
  }

  getFormData() {
    return this.formData;
  }

  created() {
    this.$bus.$on("projectSaveForm", this.validateFormData);
  }
}
</script>

<style lang="scss" scoped>
@import "./NewJob.scss";
</style>
